<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：<select id="province" onchange="selectCity(this)">
			<option value="">-------请选择-------</option>
		 </select>
	城市：<select id="city" onchange="selectArea(this)">
			<option value="">---请选择---</option>
		 </select>
	区县：<select id="area">
			<option value="">---请选择---</option>
		 </select>
		  
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	$(function(){
		$.post(
			 // $.get(url, [data], [callback], [type]
			'${pageContext.request.contextPath}/China?method=selectProvince',
			function (jsonObj){
				console.log(jsonObj);
				var html = '<option value="">-------请选择-------</option>';
				for (var i = 0; i < jsonObj.length; i++){
					html += '<option value="'+ jsonObj[i].id +'">'+jsonObj[i].province+'</option>';
				}
				/* $(jsonObj).each(function() {
					html += '<option value="'+this.id+'">'+this.province+'</option>';
				}) */
				$('#province').html(html);
			},
			'json'
			
		);
	});
	
	function selectCity(Obj){
		console.log(Obj);
		console.log(Obj.value);
		var provinceId = $(Obj).val();
		console.log(provinceId);
		$.post(
			 // $.get(url, [data], [callback], [type]	
			'${pageContext.request.contextPath}/China?method=selectCity',
			{'provinceId' : provinceId},
			function(jsonObj){
				var html = '<option value="">---请选择---</option>';
				$(jsonObj).each(function(){
					html += '<option value="'+this.id+'">'+this.city+'</option>';
				});
				$('#city').html(html);
			},
			'json'
		);
	};
	
	function selectArea(Obj){
		var cityId = $(Obj).val();
		$.post(
			'${pageContext.request.contextPath}/China?method=selectArea',
			{'cityId' : cityId},
			function(jsonObj){
				var html = '<option value="">---请选择---</option>';
				$(jsonObj).each(function(){
					html += '<option value="'+this.id+'">'+this.area+'</option>';
				});
				$('#area').html(html);
			},
			'json'
		);
	};
	
		
	</script>
</body>
</html>